<template>
	<view class="category_wrapper">
		<!-- 学科项目 -->
		<view v-for="subject in subjects" :key="subject.id" class="category_wrapper_item" @tap="selectSubject(subject)">
			<!-- 左侧图片 -->
			<view class="category_wrapper_item_img">
			</view>
			<!-- 右侧项目内容 -->
			<view class="category_wrapper_item_content">
				<view class="category_wrapper_item_content_title">
					{{subject.name}}
				</view>
				<view class="category_wrapper_item_content_sub">
					{{subject.chapterNum || 0}}章 | {{subject.questionNum || 0}}题
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAllSubjects } from '../../service/api.js'

export default {
	data() {
		return {
			subjects: []
		}
	},
	
	mounted() {
		this.loadSubjects()
	},
	
	onShow() {
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.redirectTo({ url: '/pages/login/index' })
		}
	},
	
	methods: {
		async loadSubjects() {
			try {
				const res = await getAllSubjects()
				this.subjects = res.data || []
			} catch (err) {
				console.error('加载学科列表失败:', err)
				uni.showToast({
					title: '加载学科列表失败',
					icon: 'none'
				})
			}
		},
		
		selectSubject(subject) {
			const url = '/pages/category/index?subjectId=' + subject.id + '&subjectName=' + encodeURIComponent(subject.name)
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>

<style>
.category_wrapper {
	background: linear-gradient(135deg, rgba(170, 207, 252, 1) 0%, rgba(187, 208, 251, 1) 50%, rgba(178, 236, 248, 1) 100%);
	min-height: 100vh;
	padding: 30rpx;
}

.category_wrapper_item {
	background: rgba(255, 255, 255, 0.8);
	padding: 30rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.category_wrapper_item_img {
	width: 100rpx;
	height: 100rpx;
	background-image: url('../../static/icon.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.category_wrapper_item_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30rpx;
}

.category_wrapper_item_content_title {
	font-weight: bold;
	color: #000000d4;
	flex: 1;
}

.category_wrapper_item_content_sub {
	font-size: 24rpx;
	color: #0000008f;
	margin-top: 14rpx;
}
</style> 